<template>
  <view class="myAppointmentsInfo-page">
    <NavBar title="我的预约" />

    <view class="list">
      <view class="list-item">
        <view class="name"> 挂号科室 </view>

        <view class="value"> {{ appointmentInfo?.deptName ?? "--" }} </view>
      </view>

      <view class="list-item">
        <view class="name"> 挂号医生 </view>

        <view class="value"> {{ appointmentInfo?.doctorName ?? "--" }} </view>
      </view>

      <view class="list-item">
        <view class="name"> 就诊时段 </view>

        <view class="value">
          {{ appointmentInfo?.visitDate }} 第{{ appointmentInfo?.visitSeqNo }}号
          {{ appointmentInfo?.visitStartTime }}</view
        >
      </view>

      <view class="list-item">
        <view class="name"> 挂号费 </view>

        <view class="value">
          {{
            appointmentInfo?.regFee
              ? (appointmentInfo?.regFee / 100).toFixed(2)
              : "0.00"
          }}元
        </view>
      </view>

      <view class="list-item">
        <view class="name"> 状态 </view>

        <view class="value">
          {{
            regStatusEnum.find(
              (item) => item.value?.toString() === appointmentInfo?.regStatus
            )?.text ?? "--"
          }}
        </view>
      </view>

      <view class="list-item">
        <view class="name"> 渠道 </view>

        <view class="value">
          {{
            regChannelEnum.find(
              (item) =>
                item.value?.toString() ===
                appointmentInfo?.payStatus?.toString()
            )?.text ?? "--"
          }}
        </view>
      </view>

      <view class="list-item">
        <view class="name"> 姓名 </view>

        <view class="value"> {{ appointmentInfo?.patientName }} </view>
      </view>

      <view class="list-item">
        <view class="name"> 性别 </view>

        <view class="value">
          {{
            appointmentInfo?.patientGender === "1"
              ? "男"
              : appointmentInfo?.patientGender === "2"
              ? "女"
              : "未知"
          }}
        </view>
      </view>

      <view class="list-item">
        <view class="name"> 身份证号 </view>

        <view class="value">
          {{ idCardFormat(appointmentInfo?.idCard ?? "") }}
        </view>
      </view>
    </view>

    <view class="btns" v-if="appointmentInfo?.regStatus === '1'">
      <view class="btn" @tap="handleCancel"> 退号 </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import Taro, { useReady, useRouter } from "@tarojs/taro";
import NavBar from "../../components/NavBar.vue";
import { useUserStore } from "../../stores/userStore";
import { ref, computed } from "vue";
import { idCardFormat } from "../../utils/format.util";
import { cancelAppointment } from "../../api/appointment.api";

const userState = useUserStore();
const regStatusEnum = [
  {
    text: "待取",
    value: "1",
  },
  {
    text: "待签",
    value: "2",
  },
  {
    text: "待诊",
    value: "3",
  },
  {
    text: "已诊",
    value: "5",
  },
  {
    text: "已退",
    value: "6",
  },
  {
    text: "过期",
    value: "7",
  },
];
const regChannelEnum = [
  {
    text: "挂号室",
    value: "1",
  },
  {
    text: "门诊",
    value: "2",
  },
  {
    text: "微信",
    value: "3",
  },
];
const loading = ref(false);
const router = useRouter();
const query = ref<{
  id: number;
}>({
  id: 0,
});

const appointmentInfo = computed(() => {
  return userState.appointmentList.find(
    (item) => item.registerId === query.value.id
  );
});

const handleCancel = async () => {
  if (loading.value) return;

  try {
    loading.value = true;

    const res = await cancelAppointment({ registerId: query.value.id });

    if (res.code === "200") {
      const params = {
        pageNo: 1,
        pageSize: 100000,
      } as Record<string, any>;

      await userState.getAppointmentListApi(params);

      Taro.showToast({
        title: "退号成功",
        icon: "success",
      });
    } else {
      Taro.showToast({
        title: res.msg,
        icon: "none",
      });
    }
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
};

useReady(() => {
  if (router.params.id) {
    query.value.id = Number(router.params.id);
  }
});
</script>

<style lang="scss">
.myAppointmentsInfo-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #ffffff;

  .list {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 16px;
    overflow-y: auto;

    .list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 16px 0px;
      background: #ffffff;
      border-bottom: 1px solid #f5f6fa;

      .name {
        font-weight: 400;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.4);
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .value {
        font-weight: 400;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.9);
        text-align: right;
        font-style: normal;
        text-transform: none;
      }
    }
  }

  .btns {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 30px 16px;

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 44px;
      background: #f8f8f8;
      border-radius: 6px 6px 6px 6px;
      font-weight: 400;
      font-size: 16px;
      color: #d90000;
      line-height: 16px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
}
</style>
